<!--
 * @Description: 标签组件
 * @Author: wangqian
 * @LastEditors: wangqian
 * @Date: 2021-06-22 16:19:24
 * @LastEditTime: 2021-06-22 21:25:45
-->
<template>
  <span :class="[mTagClass, 'm-tag']">
    <span class="tag-icon" v-if="!hideTagIcon">
      <img :src="iconImg" alt="" srcset="" />
    </span>
    <span class="tag-name">
      <slot></slot>
    </span>
    <span class="tag-close-icon" @click="tagCloseHandle" v-if="closable">
      <close-outlined />
    </span>
  </span>
</template>

<script lang="ts">
import { defineComponent, PropType, computed } from 'vue';
import { CloseOutlined } from '@ant-design/icons-vue';
import aiImg from '@/assets/image/tags/ai.svg';
import jqImg from '@/assets/image/tags/jq.svg';
import fkImg from '@/assets/image/tags/fk.svg';
import xqdwImg from '@/assets/image/tags/xqdw.svg';

export type TagType = 'default' | 'ai' | 'jq' | 'fk' | 'xqdw';
export default defineComponent({
  props: {
    closable: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String as PropType<TagType>,
      default: 'default',
    },
  },
  emits: ['close'],
  setup(props, { emit }) {
    const mTagClass = computed(() => {
      return `tag-type-${props.type}`;
    });
    const iconMap = {
      ai: aiImg,
      jq: jqImg,
      fk: fkImg,
      xqdw: xqdwImg,
      default: '',
    };
    const iconImg = computed(() => {
      return iconMap[props.type];
    });
    const tagCloseHandle = () => {
      emit('close');
    };
    const hideTagIcon = computed(() => {
      return ['default'].includes(props.type);
    });
    return {
      mTagClass,
      iconImg,
      tagCloseHandle,
      hideTagIcon,
    };
  },
  components: {
    CloseOutlined,
  },
});
</script>
<style scoped lang="less">
.m-tag {
  display: inline-block;
  box-sizing: border-box;
  height: auto;
  color: rgba(255, 255, 255, 1);
  font-size: 0;
  font-family: Source Han Sans CN;
  line-height: 0;
  vertical-align: middle;
  span {
    line-height: 0;
    vertical-align: middle;
  }
  .tag-icon {
    display: inline-block;
    color: inherit;
    font-style: normal;
    text-align: center;
    img {
      display: inline-block;
      width: 20px;
      height: 20px;
      font-size: 0;
    }
  }
  .tag-name {
    display: inline-block;
    padding: 0 4px;
    font-size: 12px;
    line-height: 20px;
  }
  .tag-close-icon {
    margin-left: 3px;
    padding-right: 5px;
    font-weight: 700;
    transform: scale(0.83333333) rotate(0);
    cursor: pointer;
    .anticon-close {
      font-size: 12px;
    }
    .anticon-close {
      padding: 2px;
      overflow: hidden;
      &:hover {
        background: rgba(151, 141, 141, 0.671);
        border-radius: 50%;
      }
    }
  }
}
// 默认
.tag-type-defalut {
}
// AI
.tag-type-ai {
  color: #e99220;
  background: rgba(233, 146, 32, 0.1);
  border: 1px solid #e99220;
}
// 接警
.tag-type-jq {
  color: #1ccaff;
  background: rgba(28, 202, 255, 0.1);
  border: 1px solid #1ccaff;
}
// 反馈
.tag-type-fk {
  color: #3191ff;
  background: rgba(49, 145, 255, 0.1);
  border: 1px solid #3191ff;
}
// 辖区
.tag-type-xqdw {
  color: #804ec1;
  background: rgba(49, 145, 255, 0.1);
  border: 1px solid #804ec1;
}
</style>
